<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ghost主页</title>

    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>

    <style type="text/css">
        html, body {
            color: #505050;
            line-height: 1.75em;
            background: #ebebeb;
            position: relative;
            font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
        }
        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 3em 0;
            padding: 0;
        }
        h1{
            text-align: center;
        }
        a{
            cursor: pointer;
        }
        .author{
            text-align: center;
            margin-bottom: 30px;
        }

        .header{
            position: relative;
            height: 300px;
            background: url(images/header-bg.jpg) no-repeat;
            background-size: 100% auto;
            padding: 116px 0px;
            text-align: center;
        }
        .btn-primary{
            background-color: #e67e22;
            border-color: #e67e22;
        }

        .align-bottom{
            left: 0px;
            right: 0px;
            margin-bottom: 0;
            border-radius: 0;
        }
        .navbar-fix{
            float: none;
            display: inline-block;
            vertical-align: bottom;
        }

        .nav li.active a{
            padding-bottom: 15px;
        }
        .nav li.active a{
            padding-bottom: 13px;
            border-bottom: 2px solid #e67e22;
            background-color:transparent!important;
        }
        .content p{
            text-indent: 2em;
            margin-bottom: 30px;
            font-size: 18px;
        }
        .author .name{
            color: #e67e22;
        }
        .col-sm-8>div,.col-sm-4>div{
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }

        .title{
            position: relative;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .title:after{
            content: "";
            position: absolute;
            width: 90px;
            height: 1px;
            background-color: #e67e22;
            left: 0px;
            bottom: -1px;
        }
        .misc li a{
            display: inline-block;
            padding: 3px 10px;
            margin-bottom: 4px;
            color: #888;
        }
        .community .misc li a{
            border: 1px solid #ccc;
        }
        .footer .misc li a{
            border: 1px solid #333;
            color: inherit;
        }

        .marked{
            background-color: #e67e22;
            color: #fff;
            position: absolute;
            top: -20px;
            right: -40px;
            width: 90px;
            height: 54px;
            line-height: 45px;
            text-align: center;
/*
            -webkit-transform:  rotate(45deg);
            -moz-transform:  rotate(45deg);
            -ms-transform:  rotate(45deg);
            -o-transform:  rotate(45deg);*/
            transform: rotate(45deg);
        }
        .marked span {
            vertical-align: bottom;
        }
        .page{
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;

            background-color: #e67e22;
            border-radius: 4px;
            color: #fff;
        }
        .footer{
            background-color: #202020;
            padding: 35px 70px;
            color: #959595;
        }
        .footer h3{
            color: #fff;
        }
        .footer>.col-xs-4>div{
            padding: 10px 0px;
            border-bottom: dashed 1px #777;
        }
        .footer a{
            color: inherit;
        }

        .partner a{
            display: inline-block;
            line-height: 2em;
            text-decoration: none;
        }
        .partner a:hover{
            color: #fff;
            background-color: #e67e22;
        }

        .back-to-top{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            background-color: rgba(230, 126, 34, 0.6);
            text-align: center;
            color: #fff;
            border-radius: 4px;
        }
        .back-to-top:hover{
            background-color: #e67e22;
        }
    </style>
</head>
<body>
    <div class="header">
        <a><img src="images/logo.png"></a>
    </div>
    <nav class="navbar navbar-default  align-bottom">
        <div class="container-fluid text-center">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-fix">
                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">快捷手册</a></li>
                    <li><a href="#">中文文档</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <br>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div class="well">
                    <h1>Node.js v4 LTS 成为 Ghost 推荐版本</h1>
                    <div class="author">作者：<span class="name">王赛</span> • 2016年7月26日</div>
                    <div class="content">
                        <p>从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。 我们这样做其实已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro) 上托</p>
                    </div>
                    <button class="btn btn-primary">阅读全文</button>
                    <hr>
                    <span class="glyphicon glyphicon-envelope"></span>
                </div>
                <div class="well">
                    <div class="marked"><span class="glyphicon glyphicon-star"></span></div>
                    <h1>Node.js v4 LTS 成为 Ghost 推荐版本</h1>
                    <div class="author">作者：<span class="name">王赛</span> • 2016年7月26日</div>
                    <div class="content">
                        <img src="images/article-2.png" style="width: 100%;height: auto">
                        <br><br>
                        <p>从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。 我们这样做其实已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro) 上托</p>
                    </div>
                    <button class="btn btn-primary">阅读全文</button>
                    <hr>
                    <span class="glyphicon glyphicon-envelope"></span>
                </div>
                <div class="well">
                    <h1>Node.js v4 LTS 成为 Ghost 推荐版本</h1>
                    <div class="author">作者：<span class="name">王赛</span> • 2016年7月26日</div>
                    <div class="content">
                        <p>从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。 我们这样做其实已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro) 上托</p>
                    </div>
                    <button class="btn btn-primary">阅读全文</button>
                    <hr>
                    <span class="glyphicon glyphicon-envelope"></span>
                </div>
                <div class="text-center">
                    <span class="page">第1页/共8页</span>&nbsp;<button class="btn btn-primary"><span class="glyphicon glyphicon-chevron-right"></span></button>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="well community">
                    <h3 class="title">社区</h3>
                    <p>QQ群：277327792</p>
                    <p><span class="glyphicon glyphicon-hand-right"></span>&nbsp;&nbsp;<a style="color: #e67e22;">问答社区</a></p>
                    <p><span class="glyphicon glyphicon-hand-right"></span>&nbsp;&nbsp;<a style="color: #e67e22;">官方微博</a></p>
                </div>
                <div class="well community">
                    <h3 class="title">下载Ghost</h3>
                    <button class="btn btn-primary" style="width: 100%">Ghost中文版(0.7.4)</button>
                </div>
                <div class="well community">
                    <h3 class="title">标签云</h3>
                    <ul class="list-inline misc">
                        <li><a>jQuery</a></li>
                        <li><a>Ghost 0.7版本</a></li>
                        <li><a>开源</a></li>
                        <li><a>助手函数</a></li>
                        <li><a>标签云</a></li>
                        <li><a>导航</a></li>
                        <li><a>自定义页面</a></li>
                        <li><a>静态页面</a></li>
                        <li><a>Rong.io</a></li>
                        <li><a>配置文件</a></li>
                        <li><a>又拍云存储</a></li>
                        <li><a>上传</a></li>
                        <li><a>HandleBars</a></li>
                        <li><a>邮件</a></li>
                        <li><a>快捷键</a></li>
                        <li><a>用户指南</a></li>
                        <li><a>主题市场</a></li>
                        <li><a>新版本发布</a></li>
                        <li><a>...</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer clearfix">
        <div class="col-sm-4">
            <h3 class="title">最新文章</h3>
            <div>
                <p>Node.js v4 LTS 成为 Ghost 推荐版本</p>
                <p>2016年7月26日</p>
            </div>
            <div>
                <p>Ghost 桌面版 APP 正式发布，能同时管理多个 Ghost 博客</p>
                <p>2016年7月26日</p>
            </div>
            <div>
                <p>Node.js v4 LTS 成为 Ghost 推荐版本</p>
                <p>2016年7月26日</p>
            </div>
        </div>
        <div class="col-sm-4">
            <h3 class="title">标签云</h3>
            <ul class="list-inline misc">
                <li><a>Ghost</a></li>
                <li><a>新版本发布</a></li>
                <li><a>JavaScript</a></li>
                <li><a>Promise</a></li>
                <li><a>主题</a></li>
                <li><a>Node.js</a></li>
                <li><a>MySQL</a></li>
                <li><a>Nginx</a></li>
                <li><a>阿里云服务器</a></li>
                <li><a>Ubuntu</a></li>
                <li><a>深度玩转</a></li>
                <li><a>Markdown</a></li>
                <li><a>反向代理</a></li>
                <li><a>Apache</a></li>
                <li><a>...</a></li>
            </ul>                ..
        </div>
        <div class="col-sm-4 partner">
            <h3 class="title">合作伙伴</h3>
            <div>
                <ul class="list-inline">
                    <li><a>Bootstrap中文网</a></li>
                    <li><a>开放CDN服务</a></li>
                    <li><a>Grunt中文网</a></li>
                    <li><a>Gulp中文网</a></li>
                </ul>
            </div>
            <div>

                <ul class="list-inline">
                    <li><a>Lodash中文文档</a></li>
                    <li><a>jQuery中文文档</a></li>
                </ul>
            </div>
            <div>
                <ul class="list-inline">
                    <li><a>阿里云</a></li>
                </ul>
            </div>
            <div>
                <ul class="list-inline">
                    <li><a>又拍云</a></li>
                    <li><a>UCloud</a></li>
                    <li><a>七牛云存储</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="text-center" style="line-height: 100px;background-color: #000">
        <span>Copyright © <a>Ghost中文网</a> | <a>京ICP备11008151号</a> | 京公网安备11010802014853</span>
    </div>
    <a class="back-to-top"><span class="glyphicon glyphicon-chevron-up"></span></a>
</body>
</html>